<template>
  <div>
    <nav-header></nav-header>
    <nav-bread>
      <li slot="bread"><a href="#">地址选择</a></li>
    </nav-bread>

    <div class="container">
      <div class="row">
        <div class="col-md-3 col-sm-4" v-for="(item,index) in addressListFilter">
          <div class="address-list" :class="{'check':checkIndex==index}" @click.stop="checkIndex=index;selectedAddrId=item.addressId">
            <h4>{{item.userName}}</h4>
            <p>{{item.streetName}}</p>
            <p>{{item.postCode}}</p>
            <p>
              <span v-if="item.isDefault">默认地址</span>
              <span v-else @click="setDefault(item.addressId)">设为默认</span>
              <span @click="deleteAddress(item.addressId)" class="glyphicon glyphicon-trash"></span>
            </p>
          </div>
        </div>
        <div class="col-md-3 col-sm-4">
          <div class="address-list text-center">
            <span class="glyphicon glyphicon-plus"></span>
            <span>添加地址</span>
          </div>
        </div>

      </div>
      <p class="text-center" @click="expend">查看更多</p>
      <div>
        <router-link tag="button" type="button"
                     :to="{path:'orderConfirm',query:{'addressId':selectedAddrId}}">下一步</router-link>
      </div>
    </div>
    <model :mdShow="isMdShow" @close="closeModel">
      <p slot="title">提示</p>
      <p slot="msg">确认要删除此地址</p>
      <div slot="btnGroup">
        <a class="btn default" @click="isMdShow=false">取消</a>
        <a class="btn default" @click="del">确认</a>
      </div>
    </model>

    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import NavHeader from '@/components/Header'
  import NavFooter from '@/components/Footer'
  import NavBread from '@/components/Bread'
  import Model from '@/components/Model'
  import axios from 'axios'

  export default {
    name: "Address",
    data() {
      return {
        limit: 3,
        addressList: [],
        checkIndex: 0,
        selectedAddrId:'',
        isMdShow: false,
        addressId:"",
      }
    },
    computed: {
      addressListFilter() {
        return this.addressList.slice(0, this.limit);
      }
    },
    components: {
      NavHeader,
      NavFooter,
      NavBread,
      Model
    },
    mounted: function () {
      this.init()
    },
    methods: {
      init() {
        var self = this;
        axios.get("users/addressList").then(function (res) {
          var res = res.data;
          console.log(res);
          if (res.status == '0') {
            self.addressList = res.result
          }
        })
      },
      //查看更多
      expend() {
        if (this.limit == 3) {
          this.limit = this.addressList.length;
        } else {
          this.limit = 3
        }
      },
      setDefault(addressId) {
        console.log(addressId);
        var self = this;
        axios.post("/users/setDefault", {
          addressId: addressId
        }).then(function (res) {
          var res = res.data;
          if (res.status == '0') {
            console.log("set success");
            self.init();
          }
        })
      },
      closeModel: function () {
        this.isMdShow = false
      },
      deleteAddress: function (addressId) {
        this.isMdShow = true;
        this.addressId = addressId
      },
      //
      del(){
        var self = this;
        axios.post("/users/delAddress",{
          addressId:self.addressId
        }).then(function (res) {
          var res = res.data;
          if(res.status=='0'){
            alert('成功')
            self.isMdShow = false;
            self.init()
          }else {
            alert('失败')
          }
        })
      }
    },

  }
</script>

<style scoped>
  .address-list {
    border: 1px solid #f1f1f1;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 15px;
  }

  .check {
    border: 1px solid #00B7FF;
  }
</style>
